<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        table {border-collapse: collapse; font-size: 14px; width: 80%; margin: auto}
        table, th, td {border: 1px solid darkslategray;padding: 10px}
    </style>
</head>
<body th:style="'background-image: url('+@{/img/1.jpg}+');background-repeat:no-repeat;background-size:100% 100%;background-attachment: fixed;'">
<!--<body background="img/1.jpg" style=" background-repeat:no-repeat ; background-size:100% 100%;background-attachment: fixed;">-->
<script type="application/javascript" th:src="@{/js/Chart.js}"></script>
<div  style="text-align: center">
    <span style="color: darkslategray; font-size: 30px">欢迎使用！</span>
    <hr/>
    <table class="list">
        <tr>
            <th>城市</th>
            <th>天气</th>
            <th>温度</th>
            <th>风速</th>
            <th>空气指数</th>
        </tr>
        <tr th:each="fh : ${fh}">
            <td th:text="${fh.city}">西安</td>
            <td th:text="${fh.wea}">晴</td>
            <td th:text="${fh.tem}">12</td>
            <td th:text="${fh.win_speed}">3级</td>
            <td th:text="${fh.air}">71</td>
        </tr>
    </table>

    <table class="list">
        <tr>
            <th>空气质量</th>
            <th>空气建议</th>
            <th>PM25</th>
            <th>PM10</th>
            <th>SO2</th>
            <th>NO2</th>
        </tr>
        <tr th:each="zl : ${zl}">
            <td th:text="${zl.air_level}">良</td>
            <td th:text="${zl.air_tips}">可以出行</td>
            <td th:text="${zl.pm25}">66</td>
            <td th:text="${zl.pm10}">147</td>
            <td th:text="${zl.so2}">11</td>
            <td th:text="${zl.no2}">62</td>
        </tr>
    </table>

    <table class="list">
        <tr>
            <th>近7日天气</th>
            <th>明天</th>
            <th th:text="${t7.data[2].date}"></th>
            <th th:text="${t7.data[3].date}"></th>
            <th th:text="${t7.data[4].date}"></th>
            <th th:text="${t7.data[5].date}"></th>
            <th th:text="${t7.data[6].date}"></th>
        </tr>
        <tr>

            <td>最高温度</td>
            <td th:text="${t7.data[1].tem_day}"></td>
            <td th:text="${t7.data[2].tem_day}"></td>
            <td th:text="${t7.data[3].tem_day}"></td>
            <td th:text="${t7.data[4].tem_day}"></td>
            <td th:text="${t7.data[5].tem_day}"></td>
            <td th:text="${t7.data[6].tem_day}"></td>
        </tr>
        <tr>
            <td>最低温度</td>
            <td th:text="${t7.data[1].tem_night}"></td>
            <td th:text="${t7.data[2].tem_night}"></td>
            <td th:text="${t7.data[3].tem_night}"></td>
            <td th:text="${t7.data[4].tem_night}"></td>
            <td th:text="${t7.data[5].tem_night}"></td>
            <td th:text="${t7.data[6].tem_night}"></td>
        </tr>
        <tr>
            <td>天气</td>
            <td th:text="${t7.data[1].wea}"></td>
            <td th:text="${t7.data[2].wea}"></td>
            <td th:text="${t7.data[3].wea}"></td>
            <td th:text="${t7.data[4].wea}"></td>
            <td th:text="${t7.data[5].wea}"></td>
            <td th:text="${t7.data[6].wea}"></td>
        </tr>
    </table>
</div>

</body>
</html>